import React, { Component } from 'react';
import InfiniteScroll from 'react-infinite-scroller';
import { SearchBar } from 'antd-mobile';
import './shopSearch.scss';
import api from 'js/api/index';
import { i18n } from 'js/core/i18n';

class ShopSearch extends Component {
  constructor() {
    super();
    this.query = {
      searchkey: ''
    }
    this.state = {
      data: []
    }
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({})
    }, 100)
    this.getData();
  }
  onSubmit = (val) => {
    this.query.searchkey = val;
    this.getData();
  }
  getData = () => {
    api('/BaseSet/ShopListSearch', this.query).then(data => {
      this.setState({ data: data.data })
    });
  }
  onCancel = (val) => {
    this.query.searchkey = val;
    this.getData();
  }
  select = (ShopInfo) => {
    if (this.props.modelData && this.props.modelData.onChange) {
      this.props.modelData.onChange(ShopInfo);
      window.FW.emit('back');
    }
  }
  render() {
    return <div id="shopSearch" className="flex-col">
      <SearchBar onSubmit={this.onSubmit} onCancel={this.onCancel} showCancelButton={true} cancelText={i18n.get('搜索')} />
      <div className="flex-g-1 scroll-absolute">
        <div>
          {this.state.data.map(item => {
            return <div className="item" key={item.ShopId} onClick={() => { this.select(item) }}>{item.ShopName}</div>
          })}
        </div>
      </div>
    </div>
  }
}

export default ShopSearch;